<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary"><el-icon><FolderOpened /></el-icon>导出文件</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <bydTable tableName="印章刻制表格" :apiObj="list.apiObj" ref="table" border stripe>
                <el-table-column type="selection" width="50" fixed></el-table-column>
                <el-table-column label="系统序号" prop="sealId" width="80"></el-table-column>
                <el-table-column label="地区" prop="place" width="80"></el-table-column>
                <el-table-column label="工厂/部门" prop="factory" width="150"></el-table-column>
                <el-table-column label="印章名称" prop="sealName" width="200"> </el-table-column>
                <el-table-column label="物料编号" prop="materialCode" width="150"></el-table-column>
                <el-table-column label="规格" prop="specifications" width="150"></el-table-column>
                <el-table-column label="颜色" prop="sealColor" width="100"></el-table-column>
                <el-table-column label="数量" prop="sealCount" width="100"></el-table-column>
                <el-table-column label="印章类型" prop="sealType" width="100"></el-table-column>
                <el-table-column label="申请原因" prop="applyReason" width="300"></el-table-column>
                <el-table-column label="申请人" prop="applyPeople" width="150"></el-table-column>
                <el-table-column label="申请编号" prop="processId" width="100"></el-table-column>
                <el-table-column label="备注" prop="remark" width="150"></el-table-column>
                <el-table-column label="状态" prop="status" min-width="90" fixed="right"></el-table-column>
                <el-table-column label="印章图样" prop="sealPattern" width="150" fixed="right" align="center">
                    <template #default="scope">
                        <bydWaterMark ref="wm" text="印章管理系统" subtext="印章图样">
                           <el-image @click="handleLoad"
                                style="width: 120px; height: 80px" 
                                :preview-teleported="true" 
                                :src="scope.row.sealPattern" 
                                :fit="fit" 
                                :preview-src-list="[scope.row.sealPattern]">
                            </el-image>
                        </bydWaterMark>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100" v-if="userRole <= 3">
                    <template #default="scope">
                        <el-button type="text" size="default" @click="sealShow(scope.row)">备案</el-button>
                        <!-- <el-divider direction="vertical"></el-divider>
                        <el-dropdown>
                            <el-button  type="text" size="small">更多<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon></el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="table_edit(scope.row, scope.$index)">编辑</el-dropdown-item>
                                    <el-dropdown-item>推送至队列</el-dropdown-item>
                                    <el-dropdown-item divided>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown> -->
                    </template>
                </el-table-column>
            </bydTable>
        </el-main>
        <el-drawer v-model="keepDrawer" :size="'70%'" title="印章备案" custom-class="drawerBG" direction="rtl" @close="sealShowClose" destroy-on-close>
            <keepRecord :sealInfo="checkedSealInfo"></keepRecord>
        </el-drawer>
    </el-container>
</template>

<script>
    import { FolderOpened } from '@element-plus/icons-vue'
    import bydFilterBar from '@/components/bydFilterBar';
    import bydWaterMark from '@/components/bydWaterMark'
    import { create } from '@/utils/watermark'
    import keepRecord from '@/views/divisionSeal/keepRecord/index.vue'
	export default {
		name: 'engraveTable',
        components:{
            FolderOpened,
            bydFilterBar,
            bydWaterMark,
            keepRecord
        },
		data() {
			return {
                userRole : 4,
                list: {
					apiObj: this.$api.engrave.engraveSealData
				},
                keepDrawer : false,
                checkedSealInfo: []
			}
		},
		mounted(){
            const loginUserRole = this.$tool.data.get("USER_INFO").salt;
            this.$nextTick(() => {
                this.userRole = loginUserRole;
            });
		},
		methods: {
            sealShow(sealInfo){
                if(sealInfo.status != "已同意"){
                    this.$message({
                        type : 'warning',
                        message : '该印章未通过审批，不可备案!'
                    })
                }else{
                     this.checkedSealInfo.push(sealInfo);
                     this.keepDrawer = true;
                }
            },
            sealShowClose(){
                this.checkedSealInfo = [];
            },
            handleLoad() {
                setTimeout(() => {
                    const img = document.querySelector('.el-image-viewer__canvas');
                    var userInfo = this.$tool.data.get("USER_INFO");
                    create(img, { text: '印章管理系统',subtext : userInfo.username + userInfo.jobnumber })
                }, 100)
            },
		}
	}
</script>

<style>
	
</style>
